<template>
    <div class="app-container">
      <div class="filter-container">
        <el-button class="filter-item" type="primary" @click="handleCreate">
          添加题型
        </el-button>
      </div>
  
      <el-table
        :data="questionTypeList"
        border
        style="width: 100%">
        <el-table-column
          prop="name"
          label="题型名称"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="score"
          label="分值"
          width="auto">
        </el-table-column>
        <el-table-column
          label="操作"
          width="150"
          fixed="right"
          align="center"
          >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 添加/编辑对话框 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
        <el-form :model="typeForm" ref="typeForm" :rules="rules" label-width="100px">
          <el-form-item label="题型名称" prop="name">
            <el-input v-model="typeForm.name"></el-input>
          </el-form-item>
          <el-form-item label="分值" prop="score">
            <el-input-number v-model="typeForm.score" :min="1" :max="100"></el-input-number>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import request from '@/utils/request'
  export default {
    name: 'QuestionType',
    data() {
      return {
        questionTypeList: [],
        currentIndex: -1,
        dialogVisible: false,
        dialogTitle: '',
        typeForm: {
          name: '',
          score: 1
        },
        rules: {
          name: [{ required: true, message: '请输入题型名称', trigger: 'blur' }],
          score: [{ required: true, message: '请输入分值', trigger: 'change' }]
        }
      }
    },
    created() {
      this.fetchTypeList()
    },
    methods: {
      async fetchTypeList() {
        const res = await request.get('/api/questionType/list')
        if (res.code === '200') {
          this.questionTypeList = res.data
        }
      },
      handleCreate() {
        this.dialogTitle = '添加题型'
        this.typeForm = {
          name: '',
          score: 1
        }
        this.dialogVisible = true
      },
      handleEdit(index, row) {
        this.dialogTitle = '编辑题型'
        this.currentIndex = index
        this.typeForm = {
          ...row
        }
        this.dialogVisible = true
      },
      handleDelete(index, row) {
        this.$confirm('确认删除该题型?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
        await request.post('/api/questionType/delete', null, { params: { id: row.id } })
        this.$message.success('删除成功!')
        this.fetchTypeList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      submitForm() {
        this.$refs.typeForm.validate(async (valid) => {
          if (valid) {
            if (this.dialogTitle === '添加题型') {
              await request.post('/api/questionType/create', this.typeForm)
            } else {
              await request.post('/api/questionType/update', { ...this.typeForm, id: this.questionTypeList[this.currentIndex].id })
            }
            this.dialogVisible = false
            this.$message.success(this.dialogTitle === '添加题型' ? '添加成功!' : '修改成功!')
            this.fetchTypeList()
          }
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .app-container {
    padding: 20px;
  }
  
  .filter-container {
    padding-bottom: 20px;
  }
  </style>